import styled from "styled-components";

export const NewAlbumStyle=styled.div`
  width: 100%;
  .new_album_box{
    display: flex;
    position: relative;
    width: 100%;
    height: 186px;
    margin-top: 20px;
    font-family: icomoon;
    border: 1px solid #ffffff;
    background: #f5f5f5;
  }
  .album_sub{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 94%;
    height: 150px;
    overflow: hidden;
  }
  .btn_left , .btn_right{
    position: absolute;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .btn_right{
   right: 0; 
  }
  .album_sub ul{
    position: relative;
    display: flex;
    justify-content: left;
    transition: left 300ms;
  }
  .album_sub ul li{
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 5px;
  }
  .music_img{
    position: relative;
    display: block;
    width: 121px;
    height: 100px;
  }
  .mask{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("https://oss.yhuayi.com/wangyiyun/image/coverall.png");
    background-position: -30px -860px;
  }
  .album_sub ul li img{
    width: 100px;
    height: 100px;
  }
  .musicName{
    display: block;
    margin-top: 7px;
    font-size: 14px;
    color: #000;
    width: 120px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .musicName:hover{
    text-decoration: underline;
  }
  .singer{
    font-size: 12px;
    color: #666;
  }
  .singer:hover{
    text-decoration: underline;
  }
  

`

